<template>
  <div class="main-body" style="margin-top:-2rem;">
    <div id="list">
      <div id="list_bg"></div>
<!--      <div class="top" id="top">-->
<!--        <div class="lunaSearch">-->
<!--          <a-->
<!--            onclick=""-->
<!--            href="https://luna.58.com/m/autotemplate?city=zz&ampcreativeid=40"-->
<!--            class="logo clickreport-luna-logo"-->
<!--            ><img src="" alt=""-->
<!--          /></a>-->
<!--          <div class="searchTxtarea">-->
<!--            <a-->
<!--              onclick=""-->
<!--              href="https://luna.58.com/m/zz/city_new.shtml?-15=20&ampurl=https%3A%2F%2Fluna.58.com%2Flist.shtml%3Fplat%3Dm%26cate%3Dshouji%26-15%3D20%26city%3Dzz%26tag%3Dsale_common_thirdshoujishuma_shouji%26PGTID%3D0d200005-0015-62d8-5909-1d8e5a804c40"-->
<!--              class="city"-->
<!--              ><i>郑州</i></a-->
<!--            ><span data-listtouchtag="lunalist_search_3"-->
<!--              ><form-->
<!--                action="https://luna.58.com/list.shtml?plat=m&ampcate=shouji&amp-15=20&ampcity=zz&amptag=sale_common_thirdshoujishuma_shouji&ampPGTID=0d200005-0015-62d8-5909-1d8e5a804c40"-->
<!--              >-->
<!--                <input-->
<!--                  type="text"-->
<!--                  class="searchArea"-->
<!--                  disabled="disabled"-->
<!--                  placeholder="找工作 找房子 找搬家"-->
<!--                /></form-->
<!--            ></span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="filter">-->
<!--          <ul class="filter_title">-->
<!--            <li data-listtouchtag="lunalist_a_1"><span>区域</span></li>-->
<!--            <li data-listtouchtag="lunalist_a_2"><span>类别</span></li>-->
<!--            <li data-listtouchtag="lunalist_a_3"><span>价格</span></li>-->
<!--          </ul>-->
<!--          <div class="filterContainer"><div class="filterBox"></div></div>-->
<!--        </div>-->
<!--      </div>-->

      <div class="list">
        <ul
          v-infinite-scroll="load"
          id="list-wrapper"
          :infinite-scroll-disabled="scroll.disabled"
          :infinite-scroll-distance="50"
          :infinite-scroll-delay="300"
          class="list-demo"
          style="margin-botto2m: 2.3rem; overflow: auto"
        >
          <!-- <ul
          v-infinite-scroll="load"
          class="infinite-list"
          style="overflow: auto"
        > -->
          <template v-for="item in dataList">
            <li class="clickreport-luna-post visiblereport-luna-card">
              <a class="list_demo_a" href=""
                ><div class="list_left">
                  <img :src="item.img" />
                </div>
                <dl class="list_right">
                  <dt class="item_title">
                    <p>{{ item.title }}</p>
                    <a class="location">祖安</a>
                  </dt>
                  <dd class="attr-demo">{{ item.description }}</dd>
                  <dd class="thirddd">
                    <!-- <span class="price-demo">{{ '1231' }}</span> -->
                    <!-- remarks -->
                    <span class="remarks">
                      <el-icon style="font-size: 0.6rem" :color="iconColor">
                        <star />
                      </el-icon>
                      <p style="font-size: 0.2rem">{{ numberFormat(item.remarkCount) }}</p>
                    </span>
                    <!-- answers -->
                    <span class="answers">
                      <el-icon style="font-size: 0.6rem" :color="iconColor">
                        <chat-dot-round />
                      </el-icon>
                      <p style="font-size: 0.2rem">{{ item.answerCount }}</p>
                    </span>
                    <!-- visits -->
                    <span class="visits">
                      <el-icon style="font-size: 0.6rem" :color="iconColor">
                        <View />
                      </el-icon>
                      <p style="font-size: 0.2rem">{{ numberFormat(item.visitCount) }}</p>
                    </span>
                    <!-- date -->
                    <span class="right_item_label"
                      ><span class="list-demo-time">{{ dateFormat(item.date) }}</span></span
                    >
                  </dd>
                </dl></a
              >
            </li>
          </template>
        </ul>
      </div>

      <div
        v-show="scroll.loading"
        class="load"
        id="infomore"
        style="display: block"
      >
        <i></i>加载更多
      </div>
      <div v-show="scroll.noMore" id="bottom" style="display: block">
        我是有底线的，没有更多信息啦~
      </div>
    </div>
    <div class="searchBox">
      <div class="searchInput">
        <div class="searchTxtarea">
          <a
            href="https://luna.58.com/m/zz/city_new.shtml?-15=20&ampurl=https%3A%2F%2Fluna.58.com%2Flist.shtml%3Fplat%3Dm%26cate%3Dshouji%26-15%3D20%26city%3Dzz%26tag%3Dsale_common_thirdshoujishuma_shouji%26PGTID%3D0d200005-0015-62d8-5909-1d8e5a804c40"
            class="city"
            >郑州</a
          ><span
            ><form
              action="https://luna.58.com/list.shtml?plat=m&ampcate=shouji&amp-15=20&ampcity=zz&amptag=sale_common_thirdshoujishuma_shouji&ampPGTID=0d200005-0015-62d8-5909-1d8e5a804c40"
            >
              <input
                type="text"
                placeholder="找工作 找房子 找搬家"
                class="searchArea"
              /></form
          ></span>
        </div>
        <span class="close">取消</span>
      </div>
      <div class="searchHistory">
        <h2>浏览历史</h2>
        <div class="historyList"></div>
      </div>
      <div class="searchList"></div>
    </div>
  </div>
</template>

<script>
import { getQuestionListApi, getRequirementListApi } from "@/api/webApi.js"
import {
  AddLocation,
  Star,
  ChatDotRound,
  ChatRound,
  ChatLineSquare,
  Comment,
  Tickets,
  View,
} from "@element-plus/icons-vue"
import Base from "@/pages/BaseComponent"
import {numberFormat,dateFormat,dateFormatForList,dateFormat2,mockDate} from '@/utils/common.js'

export default {
  name: "QuestionList",
  extends: Base,
  components: { AddLocation, View, ChatDotRound, Star, Tickets },
  setup() {},
  created() {
    // let date = mockDate(3)
    // let d2 = dateFormat2(new Date()) 
    // debugger
    this.scroll.disabled = false
    console.log("page created")
    this.load()
  },
  computed:{},
  mounted() { 

    // 初始化ul元素高度,下拉刷新的组件会有连续加载的问题
    let docHeight = document.documentElement.clientHeight
    let listWrapper = document.getElementById("list-wrapper")
    // let topHeight = document.getElementById('top').clientHeight
    listWrapper.style.height = docHeight + "px"
  },
  methods: {
    numberFormat, 
    'dateFormat':dateFormatForList,
    load() {
      if (this.scroll.disabled) {
        return
      }
      console.log("load")
      this.scroll.loading = true
      this.scroll.disabled = true
      setTimeout(() => {
        getQuestionListApi(this.page)
          .then((res) => {
            let { code, msg, data } = res
            let { rows, count } = data

            if (code == 200) {
              this.page.pageIndex += 1
              if (rows.length == 0) {
                this.scroll.disabled = true
                this.scroll.noMore = true
              } else {
                this.dataList = this.dataList.concat(rows) 
              }
            } else {
              // msg
            }
          })
          .catch((err) => {})
          .finally(() => {
            this.scroll.loading = false
            setTimeout(() => {
              this.scroll.disabled = false
            }, 100)
          })
      }, 0)
    },
  },
  data() {
    return {
      iconColor: "#aaa",
      dataList: [
        // {
        //   title: "实体店专业高价回收",
        //   city: "哥伦比亚",
        //   price: "面议",
        //   date: "03-07",
        //   img: "",
        // },
      ],
      scroll: {
        height: 0,
        disabled: true, // 下拉刷新禁用
        distance: 0, // 下拉刷新触发距离
        noMore: false, // 没有更多数据
        loading: false, // 加载中
        delay: 500, // 延迟
        t: null,
      },
      page: {
        pageIndex: 1, // 分页索引
        pageSize: 10, // 分页大小
        // 过滤参数
        filters: {
          city: "哥伦比亚",
          county: "WEIU",
          type: "",
          price: "",
          keyword: "文件覅我",
        },
      },
    }
  },
}
</script>

<style>
.list-demo .location{
  position: relative;
    font-size: 0.3rem;
    color: gray;
    background: gainsboro;
    padding: 0 0.1rem;
    border-radius: 0.05rem;
}
.list-demo {
  margin-top: 2.5rem;
}
.remarks,
.answers,
.visits {
  float: left;
  display: flex;
  width:1rem;
  margin-right: 0.45rem;
}
.remarks,
.answers,
.visits p{
  margin-left: 0.05rem;
  line-height: 0.6rem;
}
.list_demo_a .thirddd{
  margin-top:0.3rem;
}
.list_demo_a .item_title {
  line-height: 0.5rem;
  height: auto;
  /* max-height: 0.5rem; */
  margin-bottom: 0.rem;
}
.list_demo_a .attr-demo {
  margin-top: 0;
  height: auto;
  line-height: 0.4rem;
}
.list_demo_a img {
  width: 2rem;
  border-radius: 50%;
  margin-left: 0.2rem;
}
.list_demo_a .list_left {
  flex: 30%;
}
.list_demo_a .list_right {
  flex: 70%;
}
.infinite-list {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

@import url("@/assets/css/list_20_ershou_new_v20170613192207.css");
</style>
